<template>
  <div id="building">
    <div class="icon">
      <img :src="icon" alt="图标">
    </div>
    <!-- <div >
      <img :src="page" alt="页面" class="page">
    </div> -->
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
    size="default" @submit.prevent>
    <el-row class="el-row">
      <el-col :span="24" class="grid-cells">
        <div class="form-group">
      <a class="zh" href="#" lass="button" @click="changeLang('zh')">{{ $t('login.langZh') }}</a>
      <a href="#" lass="button" @click="changeLang('en')">{{ $t('login.langEn') }}</a>
    </div >
        <el-form-item  label-width="52px" prop="userName" class="required label-center-align" style="margin-left: 70px; margin-top: 200px; width: 450px;">
          <el-input class="input" size="large" maxlength="20" show-word-limit :placeholder="$t('login.userName')" v-model="formData.userName" type="text" clearable >
          <template #prefix>
            <el-icon class="el-input_icon"><User/></el-icon>
          </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" class="grid-cells">
        <el-form-item  label-width="52px" prop="passWord" class="required label-center-align" style="margin-left: 70px; width: 450px; margin-top: -126px;">
          <el-input size="large" show-password :placeholder="$t('login.password')" v-model="formData.passWord" type="password" clearable>
            <template #prefix>
            <el-icon class="el-input_icon"><Lock /></el-icon>
          </template>
        </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" class="submin">
        <div class="static-content-item">
          <el-button size="large" @click="submit" style="width: 400px; margin-left: 20px; background-color: #23aa82">{{ $t('login.loginBtn') }}</el-button>
        </div>
      </el-col>
      <el-col :span="12" class="grid-cell">
        <div class="static-content-items">
          <el-button @click="register">{{ $t('login.register') }}</el-button>
        </div>
      </el-col>
      <el-col :span="12" class="grid-cell">
        <div class="static-content-itemd">
          <el-button @click="forget">{{ $t('login.forget') }}</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
  </div>
</template>

<script>
  import {defineComponent,toRefs,reactive,getCurrentInstance}from 'vue'
  import { useI18n } from 'vue-i18n'
  import {User,Lock} from '@element-plus/icons-vue'

  export default defineComponent({
    components: {User,Lock},
    props: {},
    setup() {
      const state = reactive({
        formData: {
          passWord: "",
          userName: "",
        },
        List:{
          delFlag:"",
          email: "",
          mobile: "",
          modtime: "",
          niceName: "",
          password: "",
          registerdate: "",
          remark: "",
          userName: "",
          userUuid: "",
        },
        rules: {
          userName: [{
             required: true,
             message: '请输入账号',
           }],
           passWord: [{
             required: true,
             message: '请输入密码',
           }, {
             pattern: /^[^一-龥]+$/,
             trigger: ['blur', 'change'],
             message: '账号或密码错误'
           }],
        },
      })
      const instance = getCurrentInstance()
      var that = instance.proxy;
      const { locale } = useI18n();
      const submitForm = () => {
        instance.proxy.$refs['vForm'].validate(valid => {
          if (!valid) return
          //TODO: 提交表单
        })
      }
      const resetForm = () => {
        instance.proxy.$refs['vForm'].resetFields()
      }
      const changeLang = (lang) => {
        locale.value = lang
        localStorage.setItem('lang', lang)
        that.$bus.emit('changeLang');
      }

      return {
        ...toRefs(state),
        submitForm,
        resetForm,
        changeLang,
        icon: require('../assets/ntt.png'),
         page: require('../assets/0.jpg'),
      }
    },
    methods:{
        submit(){
            var that = this;
            window.http.post('/api/user/login',this.formData).then(res => {
              console.info(JSON.stringify(res));
              var data = res.data;
              that.List=data.list[0];
              if(data.success){
                that.$message.success('登录成功');
                that.query();
                window.sessionStorage.setItem('token',that.formData.userName)
                console.info(that.List.remark);
                if(that.List.remark==="1"){
                  this.$router.push({
                    name:"homepage",query:{userName:this.formData.userName}
                  });
                }else{
                  this.$router.push({
                  name:"department",query:{userName:this.formData.userName}
                  });
                }
              }else{
                that.$message.error('登录失败');
              } 
            }).catch(function(error){
              that.$message.error('服务器异常');
            })
        },
        query(){
            var that = this;
            window.http.post('/api/user/query',this.formData).then(res => {
              console.info(JSON.stringify(res));
              var data = res.data;
                window.sessionStorage.setItem('token1',data.code);
                console.info(JSON.stringify(data.code));
            })
            .catch(function(error){
              that.$message.error('服务器异常');
            })
        },
        register(){
            this.$router.push({name:"register"});
        },
        forget(){
            this.$router.push({name:"forget"});
        },
        changzh(){
          localStorage.setItem("lang",'zh');
        },
        changen(){
          localStorage.setItem("lang",'en');
        }
      },
  })
  
</script>

<style lang="scss">
#building{
  background:url("../assets/bg.png");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
  .el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }
  .el-row{
    width: 38%;
    margin-top: -87px;
    height: 850px;
    border: 1px solid #c2c0c0;
    margin-left: auto;
    background: -webkit-linear-gradient(bottom,hsl(0, 5%, 96%),hsla(189, 64%, 77%, 0),aliceblue) no-repeat;
  }
  .submin{
    margin-left: 100px;
  }
  .static-content-items{
    margin-left: 86px;
  }
  .static-content-itemd{
    margin-left: 136px;
  }
  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }
    
    .el-rate {
      margin-top: 8px;
    }
  }
  
  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }
    
    .el-rate {
      margin-top: 6px;
    }
  }
  
  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }
    
    .el-rate {
      margin-top: 4px;
    }
  }
  
  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }
  
  .clear-fix:after {
    clear: both;
  }
  
  .float-right {
    float: right;
  }
  .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before {
    content: "";
    color:unset;
    margin-right: 0px;
  }
</style>

<style lang="scss" scoped>
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }
  
  div.tab-container {}
  
  .label-left-align :deep(.el-form-item__label) {
    text-align: left;
  }
  
  .label-center-align :deep(.el-form-item__label) {
    text-align: center;
  }
  
  .label-right-align :deep(.el-form-item__label) {
    text-align: right;
  }
  
  .custom-label {}
  
  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }
  .form-group{
    margin-bottom: -106px;
    margin-top: 106px;
    margin-left: 490px;
    

  }
  .zh{
    margin-right: 25px;
  }
  .submin{
    margin-top: -150px;
  }
  .grid-cell{
    margin-top: -200px;
  }
  .input{
    border-radius: 20px !important;
  }
</style>